import 'package:flutter/material.dart';
import 'package:flutter_common/flutter_common.dart';

class FxSwitch extends StatelessWidget {

  final bool value;
  final ValueChanged<bool>? onChanged;
  ///选中后的滑条颜色
  final Color? activeTrackColor;
  ///未选中后的滑条颜色
  final Color? inactiveTrackColor;
  ///选中后的滑块颜色
  final Color? activeThumbColor;
  ///未选中后的滑块颜色
  final Color? inactiveThumbColor;

  const FxSwitch({super.key,
    required this.value,
    this.onChanged,
    this.activeTrackColor,
    this.inactiveTrackColor,
    this.activeThumbColor,
    this.inactiveThumbColor,
  });

  @override
  Widget build(BuildContext context) {
    Color trackColor;
    Color thumbColor;
    if(value) {
      trackColor = activeTrackColor ?? FxTheme().buttonColor;
      thumbColor = activeThumbColor ?? Colors.white;
    } else {
      trackColor = inactiveTrackColor ?? Colors.grey.shade300;
      thumbColor = inactiveThumbColor ?? Colors.white;
    }

    return GestureDetector(
        onTap: () {
          onChanged?.call(!value);
        },
        child: AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            width: 46,
            height: 22,
            padding: const EdgeInsets.symmetric(horizontal: 3),
            decoration: BoxDecoration(
              color: trackColor,
              borderRadius: BorderRadius.circular(11),
            ),
            child: Align(
                alignment:
                value ? Alignment.centerRight : Alignment.centerLeft,
                child: Container(
                    width: 18,
                    height: 18,
                    decoration: BoxDecoration(
                      color: thumbColor,
                      shape: BoxShape.circle,
                    )))));
  }
}

/// 单选按钮
class RadioOption {
  final String label; // 选项标签
  final dynamic value; // 选项值
  final bool enabled; // 是否可点击

  RadioOption({
    required this.label,
    required this.value,
    this.enabled = true,
  });
}

///单选按钮
class RadioGroup extends StatelessWidget {
  final List<RadioOption> options; // 选项列表
  final dynamic groupValue; // 当前选中的值
  final ValueChanged<dynamic> onChanged; // 状态变化的回调
  final Color? activeColor;
  final Color? selectedTextColor;
  final Color? textColor;
  final Color? disabledTextColor;
  final Axis direction;
  final AlignmentGeometry alignment;
  final double spacing;
  final double runSpacing;
  final double textSize;

  const RadioGroup({super.key,
    required this.options,
    this.groupValue,
    required this.onChanged,
    this.activeColor,
    this.selectedTextColor,
    this.textColor,
    this.disabledTextColor,
    this.direction = Axis.horizontal,
    this.alignment = Alignment.centerLeft,
    this.spacing = 8,
    this.runSpacing = 0,
    this.textSize = 13,
  });

  @override
  Widget build(BuildContext context) {
    List<Widget> children = options.map((option) {
      return _buildRadioButton(
        label: option.label,
        value: option.value,
        groupValue: groupValue,
        onChanged: option.enabled ? onChanged : null,
        enabled: option.enabled,
      );
    }).toList();
    return Align(
        alignment: alignment,
        child: Wrap(
            direction: direction,
            spacing: spacing,
            runSpacing: runSpacing,
            children: children));
  }

  Widget _buildRadioButton({
    required String label,
    required dynamic value,
    required dynamic groupValue,
    required ValueChanged<dynamic>? onChanged,
    required bool enabled,
  }) {
    Color aColor;
    if(enabled == false) {
      aColor = disabledTextColor ?? FxTheme().textColor.withOpacity(0.5);
    } else if(value == groupValue) {
      aColor = selectedTextColor ?? FxTheme().buttonColor;
    } else {
      aColor = textColor ?? FxTheme().textColor;
    }
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Transform.scale(
          scale: 0.8,
          child: Radio(
            activeColor: activeColor ?? FxTheme().buttonColor,
            value: value,
            groupValue: groupValue,
            onChanged: onChanged,
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          ),
        ),
        GestureDetector(
            onTap: () => onChanged?.call(value),
            child: Text(label, style: TextStyle(fontSize: textSize, color: aColor))),
      ],
    );
  }
}